<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span> 商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="商品名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span> 成本价</label>
                <div class="layui-input-block">
                    <input type="text" name="costPrice" required  lay-verify="required" placeholder="商品名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span> 销售价</label>
                <div class="layui-input-block">
                    <input type="text" name="salePrice" required  lay-verify="required" placeholder="商品名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span> 详情URL</label>
                <div class="layui-input-block">
                    <input type="text" name="detailUrl" required  lay-verify="required" placeholder="详情URL" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span> 类目</label>
                <div class="layui-input-block">
                    <select name="categoryId" lay-verify="">
                        <option value="">请选择一个类目</option>
                        <option value="1">奶粉</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述信息</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>


      </form>
    </div>
    <script>
        layui.use(['form','layer', 'table'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
              costPrice: function(value) {
                  if (isNaN(value)) {
                      return '这里必须是数字';
                  }
              },
              salePrice: function(value) {
                  if (isNaN(value)) {
                      return '这里必须是数字';
                  }
              }
//            nikename: function(value){
//              if(value.length < 5){
//                return '昵称至少得5个字符啊';
//              }
//            }
//            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
//            ,repass: function(value){
//                if($('#L_pass').val()!=$('#L_repass').val()){
//                    return '两次密码不一致';
//                }
//            }
          });

          //监听提交
          form.on('submit(add)', function(data){
              var postData = data.field;
              postData.items = [];
              postData.items.push({
                  costPrice:postData.costPrice,
                  salePrice:postData.salePrice
              });

              console.info(JSON.stringify(postData));

              //发异步，提交数据

              var access_token = layui.data("login_info")["access_token"];

              //获取用户信息展示在头上
              $.post({
                  url : 'http://localhost:8181/product',
                  headers : {
                      "Authorization" : "Bearer " + access_token
                  },
                  contentType:"application/json; charset=UTF-8",
                  data : JSON.stringify(postData),
                  dataType: "json",
                  success: function(result) {
                      layer.alert("增加成功", {icon: 6},function () {
                          // 获得frame索引
                          var index = parent.layer.getFrameIndex(window.name);
                          //关闭当前frame
                          parent.layer.close(index);

                          parent.layui.table.render({
                              elem:'#dataTable'
                              ,height: 315
                              ,url:'http://localhost:8181/product'
                              ,headers : {
                                  "Authorization": "Bearer " + access_token
                              }
                              ,limit : 20
                              ,page: true //开启分页,
                              ,cols: [[ //表头
                                  {field: 'name', title: '名称', width:200, sort: true}
                                  ,{field: 'detailUrl', title: '详情地址', width:200}
                                  ,{field: 'description', title: '描述', width:200, sort: true}
                                  ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
                              ]]
                          });
                      });
                  }
              });

            return false;
          });
          
          
        });
    </script>
  </body>

</html>